<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : isDetail ? '详情' : '风险辨识'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JNPF-dialog JNPF-dialog_center"
    lock-scroll
    width="800px"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        size="medium"
        label-width="100px"
        label-position="right"
        :rules="rules"
      >
        <el-col :span="12">
          <el-form-item label="风险点名称" prop="point">
            <el-select
              v-model="dataForm.point"
              placeholder="请选择"
              disabled
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in pointOptions"
                :key="index"
                :label="item.mc"
                :value="item.Id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="辨识评价类型" prop="type">
            <el-select
              v-model="dataForm.type"
              disabled
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in typeOptions"
                :key="index"
                :label="item.fullName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="辨识时间" prop="bssj">
            <el-date-picker
              disabled
              v-model="dataForm.bssj"
              :style="{ width: '100%' }"
              type="date"
              format="yyyy-MM-dd"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="辨识人" prop="bsr">
            <el-select
              disabled
              v-model="dataForm.bsr"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in bsrOptions"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评价人" prop="pjr">
            <el-select
              disabled
              v-model="dataForm.pjr"
              :style="{ width: '100%' }"
            >
              <el-option value=""></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评价方法" prop="pjff">
            <el-select
              disabled
              v-model="dataForm.pjff"
              :style="{ width: '100%' }"
            >
              <el-option value=""></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="zt">
            <el-select
              disabled
              v-model="dataForm.zt"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in ztOptions"
                :key="index"
                :label="item.fullName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="评价时间" prop="pjsj">
            <el-date-picker
              disabled
              v-model="dataForm.pjsj"
              :style="{ width: '100%' }"
              type="date"
              format="yyyy-MM-dd"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <!-- 检查项 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>检查项</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          :disabled="disabled"
          @click="addlist"
          icon="el-icon-circle-plus-outline"
          >添加</el-button
        >
      </div>
      <el-table
        ref="tableForList"
        :data="dataForm.inspect"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="listLoading"
      >
        <el-table-column type="index" label="序号" align="left" />
        <!-- 设备设施 -->
        <el-table-column
          prop="jcxm"
          v-if="dataForm.type == 0"
          label="检查项目"
          align="left"
        />
        <el-table-column
          prop="jcbz"
          v-if="dataForm.type == 0"
          label="检查标准"
          align="left"
        />
        <el-table-column
          prop="bfhbzqk"
          v-if="dataForm.type == 0"
          label="不符合标准情况"
          align="left"
        />
        <el-table-column
          prop="zyhg"
          v-if="dataForm.type == 0 || dataForm.type == 2"
          label="主要后果"
          algin="left"
        />
        <!-- 作业活动 -->
        <el-table-column
          prop="zybz"
          v-if="dataForm.type == 1"
          label="作业步骤"
          algin="left"
        />
        <el-table-column
          prop="wxyhqzsj"
          v-if="dataForm.type == 1"
          label="危险源或潜在事件"
          algin="left"
        />
        <el-table-column
          prop="knfsdsjlxjhg"
          v-if="dataForm.type == 1"
          width="180px"
          label="可能发生的事故类型及后果"
          algin="left"
        />
        <!-- 工艺节点 -->
        <el-table-column
          prop="jd"
          v-if="dataForm.type == 2"
          label="节点"
          algin="left"
        />
        <el-table-column
          prop="cs"
          v-if="dataForm.type == 2"
          label="参数"
          algin="left"
        />
        <el-table-column
          prop="csms"
          v-if="dataForm.type == 2"
          label="参数描述"
          algin="left"
        />
        <el-table-column
          prop="ydc"
          v-if="dataForm.type == 2"
          label="引导词"
          algin="left"
        />
        <el-table-column
          prop="knyy"
          v-if="dataForm.type == 2"
          label="可能原因"
          algin="left"
        />
        <el-table-column
          prop="pc"
          v-if="dataForm.type == 2"
          label="偏差"
          algin="left"
        />
        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button
              :disabled="disabled"
              type="text"
              @click="addlist(scope.row, true, scope.$index)"
            >
              编辑
            </el-button>
            <el-button
              :disabled="disabled"
              type="text"
              @click="handleDel(scope.$index)"
              class="JNPF-table-delBtn"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, sizes"
      :total="total"
    >
    </el-pagination>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
        >提 交</el-button
      >
    </span>
    <ADD v-if="visibleAdd" ref="visibleadd" @refreshDataList="pushList"></ADD>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import { login } from "@/api/user";
import ADD from "./add";
export default {
  data() {
    return {
      row: {},
      visible: false,
      disabled: false,
      visibleAdd: false,
      listLoading: false,
      isDetail: false,
      currentPage: 1, // 当前页
      pageSize: 20,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      dataForm: {
        jhid: undefined,
        point: undefined,
        type: undefined,
        bssj: undefined,
        bsr: undefined,
        pjr: undefined,
        pjff: undefined,
        zt: undefined,
        pjsj: undefined,
        inspect: [],
      },
      rules: {},
      pointOptions: [],
      typeOptions: [
        { fullName: "设备设施", id: "0" },
        { fullName: "作业活动", id: "1" },
        { fullName: "工艺节点", id: "2" },
      ],
      bsrOptions: [],
      pjrOptions: [],
      pjffOptions: [
        { fullName: "LEC", id: "LEC" },
        { fullName: "LS", id: "LS" },
      ],
      ztOptions: [
        { fullName: "辨识中", id: "0" },
        { fullName: "已辨识", id: "1" },
      ],
    };
  },
  components: { ADD },
  created() {
    this.getpointOptions();
    // this.getbsrOptions();
    this.getpjrOptions(); 
  },
  methods: {
    // push数据
    pushList(list, distinguish) {
      let equipmentFacilities = {
        bfhbzqk: list.bfhbzqk,
        jcbz: list.jcbz,
        jcxm: list.jcxm,
        zyhg: list.zyhg,
      };
      let operationalActivities = {
        zybz: list.zybz,
        wxyhqzsj: list.wxyhqzsj,
        knfsdsjlxjhg: list.knfsdsjlxjhg,
      };
      let processNode = {
        jd: list.jd,
        cs: list.cs,
        csms: list.csms,
        ydc: list.ydc,
        knyy: list.knyy,
        pc: list.pc,
        zyhg: list.zyhg,
      };
      if (distinguish == true) {
        this.dataForm.inspect.splice(this.index, 1, list);
      } else {
        if (this.dataForm.type == 0) {
          // 设备设施
          this.dataForm.inspect.push(equipmentFacilities);
        } else if (this.dataForm.type == 1) {
          // 作业活动
          this.dataForm.inspect.push(operationalActivities);
        } else {
          // 工艺节点
          this.dataForm.inspect.push(processNode);
        }
      }
      this.total = this.dataForm.inspect.length;
    },
    // 表格内容
    tableList(point, type) {
      this.dataForm.inspect = [];
      this.listLoading = true;
      let qurey = {
        id: point,
        flag: type,
      };
      request({
        url: "/api/System/RiskPlanpoint/Actions/GetJCX",
        method: "get",
        data: qurey,
      }).then((res) => {
        this.$emit("reset");
        this.dataForm.inspect = JSON.parse(res.data.list);
        this.listLoading = false;
      });
    },
    // 添加
    addlist(row, distinguish, index) {
      this.index = index;
      this.visibleAdd = true;
      this.$nextTick(() => {
        this.$refs["visibleadd"].init(
          this.dataForm.type,
          row,
          distinguish,
          index
        );
      });
    },
    handleDel(index) {
      this.dataForm.inspect.splice(index, 1);
    },
    getpointOptions() {
      previewDataInterface("aa8f673fa506428eac6adb219a22551d").then((res) => {
        this.pointOptions = res.data;
      });
    },
    //这个就是发送的请求 获取人的
    getbsrOptions() {
      previewDataInterface("8bca424f16d6448ab09e57a028853aa9").then((res) => {
        this.bsrOptions = res.data;
      });
    },
    getpjrOptions() {
      previewDataInterface("8bca424f16d6448ab09e57a028853aa9").then((res) => {
        // this.pjrOptions = res.data
      });
    },
    // 数据回填
    init(row, isDetail) {
      this.row = row;
      this.dataForm.id = row.id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      if (this.isDetail == true) {
        // 详情
        this.disabled = true;
      } else {
        // 风险辨识
        this.disabled = false;
      }
      this.$nextTick(() => {
        if (this.dataForm.id) {
          request({
            url: "/api/System/riskPlanpoint/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataForm = res.data; // 表单回填
            this.dataForm.bsr = row.bsr;
            this.dataForm.pjr = row.pjr;
            if (this.isDetail == false) {
              // console.log('我是风险辨识');
              // 这是风险辨识 你刚刚看的是编辑
              this.tableList(this.dataForm.point, this.dataForm.type);
            } else {
              // console.log('我是编辑');
              this.edit();
            }
          });
        }
      });
    },
    edit() {
      this.listLoading = true;
      request({
        url: "/api/System/RiskPlanpoint/Actions/JCX/" + this.row.id,
        method: "get",
        data: this.listQuery,
      }).then((res) => {
        this.dataForm.inspect = JSON.parse(res.data);
        this.total = this.dataForm.inspect.length;
      });
      this.listLoading = false;
    },
    // 每页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        let quest = {
          jsonStr: JSON.stringify(this.dataForm.inspect),
          Id: this.row.id,
          flag: this.row.type,
          jhid: this.row.jhid,
          fxdid: this.row.point,
          pjff: this.row.pjff,
          bm: this.row.bm,
        };
        if (valid) {
          request({
            url: "/api/System/RiskPlanpoint/Actions/TJXX",
            method: "get",
            data: quest,
          }).then((res) => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                this.visible = false;
                this.$emit("refresh", true);
              },
            });
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.JNPF-dialog {
  .pagination {
    float: right;
    margin-top: 20px;
  }
}
</style>